<!-- components/guide/GuideTour.vue -->
<template>
  <div v-if="isVisible" class="guide-tour">
    <div 
      class="guide-overlay" 
      :style="overlayStyle"
      @click="skipGuide"
    ></div>
    
    <div 
      class="guide-highlight" 
      :style="highlightStyle"
      :class="{ 'highlight-animation': isAnimating }"
    ></div>
    
    <div 
      class="guide-tooltip" 
      :style="tooltipStyle"
      :class="{ 'tooltip-enter': isAnimating }"
    >
      <div class="tooltip-content">
        <h3>{{ currentStep.title }}</h3>
        <p>{{ currentStep.content }}</p>
        
        <div class="tooltip-actions">
          <el-button 
            v-if="currentStepIndex > 0" 
            @click="prevStep"
            size="small"
          >
            上一步
          </el-button>
          
          <el-button 
            v-if="currentStepIndex < steps.length - 1" 
            @click="nextStep"
            type="primary"
            size="small"
          >
            下一步
          </el-button>
          
          <el-button 
            v-if="currentStepIndex === steps.length - 1" 
            @click="finishGuide"
            type="success"
            size="small"
          >
            完成
          </el-button>
          
          <el-button 
            @click="skipGuide"
            size="small"
            link
          >
            跳过
          </el-button>
        </div>
      </div>
      
      <div class="tooltip-progress">
        {{ currentStepIndex + 1 }} / {{ steps.length }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useAppStore } from '@/stores/appStore'

interface GuideStep {
  element: string
  title: string
  content: string
  position?: 'top' | 'bottom' | 'left' | 'right'
}

const props = defineProps<{
  steps: GuideStep[]
}>()

const emit = defineEmits<{
  (e: 'finish'): void
  (e: 'skip'): void
}>()

const appStore = useAppStore()
const isVisible = ref(false)
const currentStepIndex = ref(0)
const isAnimating = ref(false)
const targetElement = ref<HTMLElement | null>(null)

const currentStep = computed(() => props.steps[currentStepIndex.value])

const overlayStyle = computed(() => ({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  zIndex: 9998,
  cursor: 'pointer'
}))

const highlightStyle = computed(() => {
  if (!targetElement.value) return {}
  
  const rect = targetElement.value.getBoundingClientRect()
  return {
    position: 'fixed',
    top: rect.top + 'px',
    left: rect.left + 'px',
    width: rect.width + 'px',
    height: rect.height + 'px',
    zIndex: 9999,
    pointerEvents: 'none',
    borderRadius: '4px',
    boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.5)'
  }
})

const tooltipStyle = computed(() => {
  if (!targetElement.value) return {}
  
  const rect = targetElement.value.getBoundingClientRect()
  const position = currentStep.value.position || 'bottom'
  
  let top = 0
  let left = 0
  
  switch (position) {
    case 'top':
      top = rect.top - 120
      left = rect.left + rect.width / 2 - 150
      break
    case 'bottom':
      top = rect.bottom + 10
      left = rect.left + rect.width / 2 - 150
      break
    case 'left':
      top = rect.top + rect.height / 2 - 60
      left = rect.left - 310
      break
    case 'right':
      top = rect.top + rect.height / 2 - 60
      left = rect.right + 10
      break
  }
  
  return {
    position: 'fixed',
    top: top + 'px',
    left: left + 'px',
    zIndex: 10000,
    minWidth: '300px'
  }
})

const startGuide = () => {
  isVisible.value = true
  currentStepIndex.value = 0
  updateTargetElement()
}

const nextStep = () => {
  if (currentStepIndex.value < props.steps.length - 1) {
    isAnimating.value = false
    currentStepIndex.value++
    setTimeout(() => {
      updateTargetElement()
      isAnimating.value = true
    }, 50)
  }
}

const prevStep = () => {
  if (currentStepIndex.value > 0) {
    isAnimating.value = false
    currentStepIndex.value--
    setTimeout(() => {
      updateTargetElement()
      isAnimating.value = true
    }, 50)
  }
}

const finishGuide = () => {
  isVisible.value = false
  localStorage.setItem('guideCompleted', 'true')
  emit('finish')
}

const skipGuide = () => {
  isVisible.value = false
  localStorage.setItem('guideSkipped', 'true')
  emit('skip')
}

const updateTargetElement = async () => {
  await nextTick()
  const selector = currentStep.value.element
  targetElement.value = document.querySelector(selector)
  
  // 如果找不到元素，跳过这一步
  if (!targetElement.value) {
    if (currentStepIndex.value < props.steps.length - 1) {
      nextStep()
    } else {
      finishGuide()
    }
  }
}

const handleResize = () => {
  if (isVisible.value) {
    updateTargetElement()
  }
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  
  // 检查是否需要显示引导
  const guideCompleted = localStorage.getItem('guideCompleted')
  const guideSkipped = localStorage.getItem('guideSkipped')
  
  if (!guideCompleted && !guideSkipped) {
    // 延迟启动引导，确保页面完全加载
    setTimeout(() => {
      startGuide()
    }, 1000)
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

defineExpose({
  startGuide
})
</script>

<style scoped>
.guide-tour {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.guide-highlight {
  transition: all 0.3s ease;
}

.highlight-animation {
  animation: pulse 2s infinite;
}

.guide-tooltip {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 20px;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.3s ease;
}

.tooltip-enter {
  transform: translateY(0);
  opacity: 1;
}

.tooltip-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.tooltip-content p {
  margin: 0 0 15px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.tooltip-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.tooltip-progress {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #909399;
  font-size: 12px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  }
}
</style>